<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The CheckBox Tree</title>
    <style type="text/css">
      @import "../../../dijit/themes/claro/claro.css";
      @import "../../../dijit/themes/claro/document.css";
      @import "../../../dijit/tests/css/dijitTests.css";
      @import "../../themes/claro/claro.css";
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: true,
            baseUrl: "../../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../../dojo/dojo.js"></script>
    <script type="text/javascript">
      require([
        "dojo/parser",                    // dojo parser
        "dojo/data/ItemFileWriteStore",
        "cbtree/Tree",                    // Checkbox tree
        "cbtree/extensions/TreeStyling",  // Tree styling extensions
        "cbtree/models/ForestStoreModel"
      ]);

      function checkBoxClicked( item, nodeWidget, evt ) {
        var newState = nodeWidget.get("checked" );
        var label    = this.getLabel(item);

        if( newState ) {
          this.set("iconStyle", {border:"solid"}, item );
          this.set("labelStyle",{color:"red"}, item );
        } else {
          this.set("iconStyle", {border:"none"}, item );
          this.set("labelStyle",{color:"black"}, item );
        }
        alert( "The new state for " + label + " is: " + newState );
      }
    </script>

  </head>

  <body class="claro">
    <h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1>
    <p>
      A basic CheckBox Tree using demonstrating some of the tree styling API capabilities.
    </p>
    <div id="content">
      <div data-dojo-id="store" data-dojo-type="dojo/data/ItemFileWriteStore" data-dojo-props='url:"../../data/json/Family.json"'></div>
      <div data-dojo-id="model" data-dojo-type="cbtree/models/ForestStoreModel" data-dojo-props='store:store, query:{type:"parent"}, rootLabel:"The Family"'></div>
      <div data-dojo-id="tree", data-dojo-type="cbtree/Tree" data-dojo-props='model:model, onCheckBoxClick: checkBoxClicked, id:"tree"'>
      </div>
    </div>
    <h2>Click a checkbox</h2>
  </body>
</html>